<template>
  <el-row>
    <!-- 模糊查询 -->
    <!-- 账户流水 -->
    <el-col :span="4">
      <el-input v-model="clientId" size="mini" placeholder="客户ID"></el-input>
    </el-col>
    <el-col :span="4">
      <el-input v-model="dictLabel" size="mini" placeholder="流水类型"></el-input>
    </el-col>
    <el-col :span="8">
      <el-button type="primary" size="mini" @click="search()" icon="el-icon-search">搜索</el-button>
      <el-button type="primary" size="mini" @click="flush()" icon="el-icon-search">刷新</el-button>
    </el-col>
    <!-- 功能列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="clientId" label="客户ID" width="200"></el-table-column>
      <el-table-column prop="dictLabel" label="流水类型" width="200"></el-table-column>
      <el-table-column prop="addtime" label="添加时间" width="200"></el-table-column>
      <el-table-column prop="amount" label="支付类型（现金，信用卡，银行卡）" width="200"></el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 4, 5, 6, 100, 200, 300, 400]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 100,
      clientId:"",
      dictLabel:"",
      typeId:"",
      addtime:"",
      amount:"",
      id: "",
      addFormVisible: false, //添加对话框是否显示
      updateFormVisible: false, //编辑对话框是否显示
      form: { }, //添加或者更新form
      formLabelWidth: "120px",
      data: [],
    };
  },
  created: function() {
    this.load();
  },
  methods: {
    load() {
      var _this = this;
      //页面初始化时，加载的方法
      this.$http
        .get("http://localhost:9999/ms/accountStatement/queryAll", {
          params: {
            pageNo:this.currentPage,
            pageSize:this.pageSize,
            clientId:this.clientId,
            typeId:this.typeId,
            dictLabel:this.dictLabel,
            addtime:this.addtime,
            amount:this.amount,
            id:this.id
          }
        })
        .then(response => {
          console.log(response.data);
          _this.tableData = response.data.data.list;
          _this.total = response.data.data.total;
        });
    },
    //每页显示数量发生变化
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.load();
    },
    //第几页发生变化
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.load();
    },
    //查询
    search() {
      this.load();
    },
    //跳转更新
    toEdit(index, row) {
      this.form = row;
      this.updateFormVisible = true;
    },
    flush() {
      //刷新当前页
      location.reload();
    }
  }
};
</script>